<template>
  <div class="c_right">
    <div class="c_top flex flex-column align-center">
      <div class="new_top m-auto"></div>
      <h3 class="m-0 p-0 mb-1">Coal Market Information</h3>
      <h4 class="m-0 p-0 mb-1">煤市资讯</h4>
    </div>
    <div class="c_bottom">
      <div class="flex ml-5 mr-5 pt-2">
        <img style="width: 175px;height: 120px;" src="../../../assets/img/fwzx.png" alt />
        <div class="ml-3 font_energy">
          <div class="m-0 p-0">
            2019年4月全国煤炭市场景气指数简要评述
            <span>2020.12.29</span>
          </div>
          <p>2019年4月份，宏观经济运行保持在合理区间，主要耗煤产品产量有增有降，煤炭消费增幅回落，而煤炭供给相对充足，全社会库存增加，市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观市场预期依然悲观</p>
          <b>more</b>
        </div>
      </div>
      <ul class="m-0 p-0 ml-5 mr-5 mt-3">
        <div class="borderTop"></div>
        <li class="flex align-center">
          <i></i>潞安化工集团签订4659万吨煤炭购销合同
          <span>2020.12.29</span>
        </li>
        <div class="borderTop"></div>
        <li class="flex align-center">
          <i></i>潞安化工集团签订4659万吨煤炭购销合同
          <span>2020.12.29</span>
        </li>
        <div class="borderTop"></div>
        <li class="flex align-center">
          <i></i>潞安化工集团签订4659万吨煤炭购销合同
          <span>2020.12.29</span>
        </li>
        <div class="borderTop"></div>
        <li class="flex align-center">
          <i></i>潞安化工集团签订4659万吨煤炭购销合同
          <span>2020.12.29</span>
        </li>
        <div class="borderTop"></div>
          <li class="flex align-center">
          <i></i>潞安化工集团签订4659万吨煤炭购销合同
          <span>2020.12.29</span>
        </li>
        <div class="borderTop"></div>
        <li class="flex justify-end">更多></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus" scoped>
.c_right {
  margin-right: 34px;
  width: 860px;
  height: 622px;
}

.c_top {
  width: 860px;
  height: 140px;
  background: #FCF5D7;

  h3 {
    font-size: 32px;
    color: #333333;
    padding-bottom: 10px;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
  }
}

.c_bottom {
  width: 860px;
  height: 470px;
  background: #FFFFFF;
  box-shadow: 6px 7px 52px 5px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

.font_energy {
  div {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    position: relative;

    span {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      display: inline-block;
      right: 0;
      position: absolute;
    }
  }

  p {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  b {
    font-style: normal;
    display: inline-block;
    width: 98px;
    height: 28px;
    border: 1px solid #666666;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
    text-align: center;
  }
}

ul {
  li {
    list-style: none;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    line-height: 36px;
    position:relative;
    line-height:45px;

    i {
      width: 6px;
      height: 6px;
      background: #FF9730;
      border-radius: 50%;
      display: inline-block;
      margin-right:10px
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      position absolute;
      right:0
    }
  }
}
</style>